﻿<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />

		<style type="text/css">
			* {
				margin: 0;
				padding: 0
			}
			
			ul,
			li {
				list-style: none
			}
			
			#box {
				width: 810px;
				height: 320px;
				position: relative;
				overflow: hidden;
			}
			
			#ul {
				width: 810px;
				height: 1600px;
				position: absolute;
			}
			
			#ul li {
				width: 810px;
				height: 320px;
				float: left;
			}
			
			#nav {
				width: 30px;
				height:320px;
				position: absolute;
				top:0px;
				right: 0px;
				background: #222;
				opacity: 0.5;
			}
			
			#nav li {
				display: block;
				margin-bottom:50px;
				margin-left:5px;
				width: 20px;
				height: 20px;
				background: #fff;
				border-radius: 50%;
				opacity:1;
			}
			
			#nav .active {
				
							}
						});
						var _index = index >= 4 ? 0 : index;
						for(var i = 0; i < lilist.length; i++) {
							lilist[i].className = "";
						}
						lilist[_index].className = "active";
						console.log("这是鼠标划出的定时器","_index"+_index,"index"+index);
					}, 2000)
				}
				var t = setInterval(function() {	//鼠标划出以及页面刚加载时的定时器
					
					animate(ul, { top: -320 * ++index }, {
						callback: function() {
							if(index >= 4) {
								ul.style.top = 0;
								index = 0;
							}
						}
					});
					var _index = index >= 4 ? 0 : index;
					for(var i = 0; i < lilist.length; i++) {
						lilist[i].className = "";
					}
					lilist[_index].className = "active";
					console.log("这是鼠标起始的定时器","_index"+_index,"index"+index);
				}, 2000)
				
				/**
				 设置小球 */
				
				for(var i=0;i<lilist.length;i++){
					lilist[i].index = i;
					lilist[i].onclick = function(){//给每一个li添加单击事件
						for(var i = 0; i < lilist.length; i++) {//鼠标单击所有小球颜色变为原来颜色
							lilist[i].className = "";
						}
						index = this.index
						this.className = "active";//给单击的小球添加颜色
						animate(ul, { top: -320 * this.index });//单击切换图片
					}.bind(lilist[i]);
				}
			}
		</script>
	</head>

	<body>
		<div id="box">
			<ul id="ul">
				<li><img src="images/001.jpg" /></li>
				<li><img src="images/002.jpg" /></li>
				<li><img src="images/003.jpg" /></li>
				<li><img src="images/004.jpg" /></li>
				<li><img src="images/001.jpg" /></li>
			</ul>
			<ul id="nav">
				<li class="active" style="margin-top:30px"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div style="color:red;margin:100px;">
			请等待运动结束后再单击小球~~~
		</div>
	</body>

</html>